<template>
  <view v-if="setting">
    <u-navbar
      backIconColor="#333333"
      title-size="36"
      :title="title"
      height="50"
      :is-back="true"
      :border-bottom="false"
      title-color="#333333"
    >
    </u-navbar>
    <view class="card">
      <view class="title">
        兑换余额<text class="bl"
          >(兑换比例=1:{{ (setting.bonusToMoneyPercent * 0.01).toFixed(0) }})</text
        >
      </view>
      <u-line></u-line>
      <view class="cell">
        <input
          @input="amountChange"
          :placeholder="`输入兑换` + exchangeTitle + `个数`"
          v-model="form.amount"
        />
      </view>
      <u-line></u-line>
      <view class="ms dis-flex flex-y-between flex-y-center" v-if="setting">
        <view>当前可兑换贡献值{{ setting.bonus }} </view>
        <view class="all" @click="amountChange()">全部兑换</view>
      </view>
      <u-line></u-line>
      <view class="res dis-flex flex-y-between flex-y-center">
        <view>兑换{{ duihuanTitle }}为</view>
        <view class="num">¥{{ duihuanAmount }}</view>
      </view>
    </view>
    <view class="sub" @click="incrementTo">确认兑换</view>
    <view class="tishi">
      <u-parse :html="setting.bonusToMoneyTips" />
      <!-- <view class="tl">温馨提示</view>
			<view class="item">1、兑换{{duihuanTitle}}额度≥1，每月20号进行兑换操作；</view>
			<view class="item">2、确认兑换提交后，将实时兑换为积分{{duihuanTitle}}额度；</view>
			<view class="item">3、兑换成功后，{{duihuanTitle}}额度进入账户余额，可提现；</view>
			<view class="item">
				4、兑换提示由后台自行编辑，以上内容仅作展示；
			</view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      title: '兑换现金',
      digitalAssets: null,
      duihuanTitle: '现金',
      exchangeTitle: '奖励',
      setting: null,
      form: {
        amount: ''
      },
      duihuanAmount: 0
    }
  },
  onLoad(options) {
    this.title = '兑换余额'
    this.duihuanTitle = '余额'
    this.exchangeTitle = '贡献值'
    this.$u.get('/app-api/member/growth/overview').then((res) => {
      this.setting = res.data
    })
  },
  methods: {
    amountChange() {
      this.form.amount = this.setting.bonus
    },
    incrementTo() {
      if (this.form.amount == '' || this.form.amount == 0) {
        this.$u.toast('输入兑换数量')
        return
      }
      let url = '/app-api/member/digital-assets/bonus/to-money'
      let app = this
      app.$u.post(url, app.form).then((res) => {
        if (res.code === 0) {
          app.$u.toast('兑换成功')
          setTimeout(function () {
            uni.navigateBack()
          }, 1500)
        } else {
          this.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 30rpx 20rpx;

  .title {
    font-size: 32rpx;
    margin-bottom: 35rpx;

    .bl {
      color: #999999;
      font-size: 26rpx;
    }
  }

  .cell {
    padding: 23rpx 0;

    input {
      font-size: 36rpx;
    }
  }

  .ms {
    padding: 30rpx 0;
    color: #999999;
    font-size: 28rpx;

    .all {
      color: #10a28f;
    }
  }

  .res {
    padding-top: 30rpx;
    font-size: 26rpx;
    color: #10a28f;

    .num {
      font-weight: 600;
      font-size: 36rpx;
    }
  }
}

.sub {
  width: 710rpx;
  height: 80rpx;
  background: #10a28f;
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 80rpx;
  text-align: center;
  margin: auto;
  margin-top: 110rpx;
  margin-bottom: 59rpx;
}

.tishi {
  font-size: 28rpx;
  color: #333333;
  line-height: 48rpx;
  margin: 0 20rpx;

  .tl {
    margin-bottom: 4rpx;
  }
}
</style>
